<template>
  <div class="browser-head" v-if="currentBrowserTab.type === 'link'">
    <a-flex :gap="8">
      <div class="system__icon" @click="gotoHome">
        <HomeOutlined />
      </div>
      <div class="system__icon" @click="update">
        <ReloadOutlined />
      </div>

      <div class="input flex-1 flex">
        <input
          @focus="focus"
          ref="inputRef"
          v-model="src"
          type="text"
          @keydown.enter="enter"
          class="flex-1"
        />
      </div>
      <a-tooltip title="外部链接打开">
        <div class="system__icon" @click="open">
          <LinkOutlined />
        </div>
      </a-tooltip>
      <QrcodeVue :text="src"></QrcodeVue>
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import { openLink } from '@/utils/common/utils';
import { browserLoading, currentBrowserTab, homePage } from '../data/browser';
import { enterUrl } from '../data/browser.methods';
import QrcodeVue from './Qrcode.vue';
const inputRef = ref<HTMLInputElement>();

const src = ref('');

const enter = async () => {
  enterUrl(src.value);
};

const focus = () => {
  inputRef.value && inputRef.value.select();
};

const update = () => {
  browserLoading.value = true;
  console.clear();
};
const gotoHome = () => {
  browserLoading.value = true;
  currentBrowserTab.value.type = 'link';
  enterUrl(homePage.value.src);
};

const open = () => {
  openLink(currentBrowserTab.value.src);
};

watch(currentBrowserTab, () => (src.value = currentBrowserTab.value.src), {
  immediate: true,
  deep: true,
});
</script>

<style lang="scss" scoped>
.input {
  background-color: #7c7c7c33;
  border-radius: 24px;
  padding: 0 12px;
  align-items: center;
  gap: 8px;
}
input {
  outline: none;
  border: none;
  background-color: transparent;
  border-radius: 24px;
  width: 100%;
  height: 100%;
}
.browser-head {
  margin-bottom: 8px;
  padding: 8px;
  background: var(--background-color);
  border-radius: var(--radius);
}
.close-icon {
  opacity: 0;
  font-size: 12px;
  &:hover {
    opacity: 1;
  }
}
.web-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  max-width: 80px;
}
</style>
